<template>
  <el-select
    ref="select"
    v-model="selectValue"
    v-load-more="onNextPage"
    v-bind="$attrs"
    remote
    :multiple="multiple"
    :remote-method="onRemoteMethod"
    v-on="$listeners"
    @change="onChange"
    @focus="onFocus"
    @clear="onClear"
  >
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script>
import { isEmpty } from 'element-ui/src/utils/util'
import { listUser, listUserByIds } from '@/api/system/user'
import select from '@/components/RemoteSelect/mixins/select'
export default {
  name: 'SelectUser',
  mixins: [select],
  methods: {
    // 加载数据
    loadData(replace) {
      listUser(this.query).then(res => {
        if (replace) {
          this.options = []
        }
        this.total = res.total
        res.rows.forEach(item => {
          if (this.checkDataNotExist(item.userId)) {
            this.options.push({
              value: item.userId,
              label: item.userName
            })
          }
        })
      })
    },
    // 回显
    echoLoadData() {
      if (!isEmpty(this.value) && this.checkDataNotExist(this.value)) {
        listUserByIds(this.value).then(res => {
          res.data.forEach(item => {
            if (this.checkDataNotExist(item.userId)) {
              this.options.push({
                value: item.userId,
                label: item.userName
              })
            }
          })
          this.selectValue = this.value
        })
      } else {
        this.selectValue = this.value
      }
    }
  }
}
</script>
